<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>日志检索 - 日志分析系统</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" rel="stylesheet">
  <style>
    :root {
      --primary-color: #4361ee;
      --danger-color: #ef476f;
      --success-color: #06d6a0;
      --warning-color: #ffd166;
      --info-color: #118ab2;
      --gray-color: #6c757d;
      --light-bg: #f8f9fa;
      --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      --sidebar-width: 250px;
    }
    
    body {
      background: #f4f6fa;
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      overflow-x: hidden;
    }
    
    /* 侧边栏样式 */
    .sidebar {
      width: var(--sidebar-width);
      background: linear-gradient(180deg, #1a1f25 0%, #2c3038 100%);
      color: #fff;
      height: 100vh;
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      z-index: 100;
      box-shadow: 2px 0 10px rgba(0,0,0,0.1);
      transition: all 0.3s ease;
    }
    
    .sidebar-brand {
      padding: 1.5rem;
      font-weight: 600;
      color: #fff;
      font-size: 1.25rem;
      border-bottom: 1px solid rgba(255,255,255,0.1);
      margin-bottom: 1rem;
    }
    
    .sidebar .nav-link {
      color: rgba(255,255,255,0.75);
      padding: 0.8rem 1.5rem;
      margin-bottom: 0.25rem;
      border-radius: 6px;
      transition: all 0.2s;
    }
    
    .sidebar .nav-link:hover {
      color: #fff;
      background: rgba(255,255,255,0.1);
    }
    
    .sidebar .nav-link.active {
      background: var(--primary-color);
      color: #fff;
      box-shadow: 0 2px 8px rgba(67, 97, 238, 0.3);
    }
    
    .sidebar .nav-link i {
      width: 24px;
      text-align: center;
      margin-right: 8px;
    }
    
    /* 主内容区域 */
    .content {
      margin-left: var(--sidebar-width);
      padding: 1.5rem;
      min-height: 100vh;
      width: calc(100% - var(--sidebar-width));
    }
    
    .page-header {
      margin-bottom: 1.25rem;
      padding-bottom: 0.75rem;
      border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    
    .page-title {
      font-weight: 700;
      color: #2d3748;
      font-size: 1.75rem;
      margin-bottom: 0;
    }
    
    /* 卡片样式统一 */
    .card {
      border: none;
      border-radius: 12px;
      box-shadow: var(--card-shadow);
      margin-bottom: 1.5rem;
      overflow: hidden;
      max-width: 100%;
    }
    
    .card-header {
      background: #fff;
      border-bottom: 1px solid rgba(0,0,0,0.05);
      font-weight: 600;
      font-size: 1.05rem;
      padding: 1rem 1.25rem;
      display: flex;
      align-items: center;
    }
    
    .card-header i {
      margin-right: 0.5rem;
      color: var(--primary-color);
    }
    
    /* 搜索表单 */
    .search-form {
      background: #fff;
      border-radius: 12px;
      box-shadow: var(--card-shadow);
      padding: 1.5rem 1.25rem;
      margin-bottom: 1.5rem;
      width: 100%;
    }
    
    .search-form .form-control, .search-form .form-select {
      border-radius: 6px;
      border-color: #e0e3e7;
      padding: 0.5rem 0.75rem;
    }
    
    .search-form .btn-primary {
      border-radius: 6px;
      font-weight: 600;
      background-color: var(--primary-color);
      border-color: var(--primary-color);
    }
    
    /* 表格样式 */
    .table {
      margin-bottom: 0;
    }
    
    .table thead th {
      background: var(--light-bg);
      font-weight: 600;
      color: #475569;
      border-bottom: 2px solid #e9ecef;
      padding: 0.75rem 1rem;
      font-size: 0.9rem;
    }
    
    .table tbody td {
      padding: 0.75rem 1rem;
      vertical-align: middle;
      border-color: rgba(0,0,0,0.05);
      font-size: 0.9rem;
    }
    
    .table-hover tbody tr:hover {
      background: rgba(67, 97, 238, 0.05);
    }
    
    .badge {
      font-weight: 500;
      padding: 0.35em 0.65em;
      font-size: 0.75em;
    }
    
    .btn-outline-info {
      color: var(--info-color);
      border-color: var(--info-color);
    }
    
    .btn-outline-info:hover {
      background-color: var(--info-color);
      color: #fff;
    }
    
    /* 响应式调整 */
    @media (max-width: 992px) {
      .sidebar {
        width: 70px;
      }
      
      .sidebar .nav-link span,
      .sidebar-brand span {
        display: none;
      }
      
      .sidebar-brand {
        padding: 1.5rem 0;
        text-align: center;
      }
      
      .sidebar .nav-link {
        padding: 0.8rem 0;
        text-align: center;
      }
      
      .sidebar .nav-link i {
        margin-right: 0;
        font-size: 1.25rem;
      }
      
      .content {
        margin-left: 70px;
        width: calc(100% - 70px);
        padding: 1.25rem 1rem;
      }
    }
    
    @media (max-width: 768px) {
      .content {
        padding: 1rem 0.75rem;
      }
      
      .search-form {
        padding: 1rem;
      }
    }
  </style>
</head>
<body>
  <div class="d-flex">
    <!-- 侧边栏导航 -->
    <nav class="sidebar">
      <div class="sidebar-brand">
        <i class="fas fa-chart-line"></i>
        <span>日志分析系统</span>
      </div>
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a href="dashboard.html" class="nav-link">
            <i class="fas fa-tachometer-alt"></i>
            <span>仪表盘</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="search.html" class="nav-link active">
            <i class="fas fa-search"></i>
            <span>日志检索</span>
          </a>
        </li>
     
      </ul>
    </nav>
    
    <!-- 主内容区域 -->
    <main class="content">
      <div class="container-fluid p-0">
        <!-- 页面标题 -->
        <div class="page-header d-flex justify-content-between align-items-center">
          <h1 class="page-title">
            <i class="fas fa-search text-primary me-2"></i>
            日志检索
          </h1>
        </div>
        
        <!-- 搜索表单 -->
        <form class="row g-3 search-form align-items-end">
          <div class="col-md-2">
            <label class="form-label small text-muted">关键字</label>
            <input type="text" class="form-control" placeholder="关键字/内容/原文">
          </div>
          <div class="col-md-2">
            <label class="form-label small text-muted">源IP</label>
            <input type="text" class="form-control" placeholder="源IP">
          </div>
          <div class="col-md-2">
            <label class="form-label small text-muted">目标IP</label>
            <input type="text" class="form-control" placeholder="目标IP">
          </div>
          <div class="col-md-2">
            <label class="form-label small text-muted">日志级别</label>
            <select class="form-select">
              <option selected>全部</option>
              <option>INFO</option>
              <option>WARN</option>
              <option>ERROR</option>
            </select>
          </div>
          <div class="col-md-2">
            <label class="form-label small text-muted">日志类型</label>
            <select class="form-select">
              <option selected>全部</option>
              <option>ACL</option>
              <option>RIS-LOG</option>
              <option>IPS</option>
              <option>其他</option>
            </select>
          </div>
          <div class="col-md-2">
            <label class="form-label small text-muted">日期</label>
            <input type="date" class="form-control">
          </div>
          <div class="col-md-12 mt-3">
            <div class="d-flex justify-content-between">
              <button type="button" class="btn btn-outline-secondary">
                <i class="fas fa-redo-alt me-1"></i>重置
              </button>
              <button type="submit" class="btn btn-primary px-4">
                <i class="fas fa-search me-1"></i>检索
              </button>
            </div>
          </div>
        </form>
        
        <!-- 结果列表 -->
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <div>
              <i class="fas fa-list"></i>日志列表
            </div>
            <div>
              <span class="badge bg-secondary me-2">共 3 条记录</span>
            </div>
          </div>
          <div class="card-body p-0">
            <div class="table-responsive">
              <table class="table table-hover mb-0">
                <thead>
                  <tr>
                    <th style="width: 15%">日志时间</th>
                    <th style="width: 8%">级别</th>
                    <th style="width: 10%">类型</th>
                    <th style="width: 12%">源IP</th>
                    <th style="width: 12%">目标IP</th>
                    <th style="width: 33%">关键信息</th>
                    <th style="width: 10%">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>2025-05-08 07:51:54</td>
                    <td><span class="badge bg-info">INFO</span></td>
                    <td>ACL</td>
                    <td>172.16.232.6</td>
                    <td>10.122.38.1</td>
                    <td>访问请求已允许 (Permit)</td>
                    <td><a href="detail.html" class="btn btn-sm btn-outline-info"><i class="fas fa-eye"></i> 查看</a></td>
                  </tr>
                  <tr>
                    <td>2025-05-08 07:51:55</td>
                    <td><span class="badge bg-warning">WARN</span></td>
                    <td>RIS-LOG</td>
                    <td>10.205.10.98</td>
                    <td>10.205.100.21</td>
                    <td>用户认证失败：连续3次密码错误</td>
                    <td><a href="detail.html" class="btn btn-sm btn-outline-info"><i class="fas fa-eye"></i> 查看</a></td>
                  </tr>
                  <tr>
                    <td>2025-05-08 07:52:01</td>
                    <td><span class="badge bg-danger">ERROR</span></td>
                    <td>IPS</td>
                    <td>未知</td>
                    <td>112.213.108.54</td>
                    <td>检测到木马后门连接尝试，已阻断</td>
                    <td><a href="detail.html" class="btn btn-sm btn-outline-info"><i class="fas fa-eye"></i> 查看</a></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="card-footer d-flex justify-content-between align-items-center">
            <div>
              <span class="text-muted small">显示 1-3 条，共 3 条</span>
            </div>
            <nav aria-label="Page navigation">
              <ul class="pagination pagination-sm mb-0">
                <li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                <li class="page-item disabled"><a class="page-link" href="#">下一页</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </main>
  </div>

  <!-- 脚本 -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html> 